<template>
  <m-container>
    <m-doc-component-doc title="图标组件(m-box)" :props="props">
      <m-doc-demo-block title="简单用法">
        <template #desc>
          <p>图标组件是基于阿里矢量图表库<el-link type="primary" href="https://www.iconfont.cn/">https://www.iconfont.cn/</el-link>封装的</p>
          <p>用户也可以通过导入自己从阿里图表库下载的<code>iconfont.js</code>文件的方式来添加自己的图标</p>
        </template>
      </m-doc-demo-block>

      <m-doc-demo-block title="图标选择器" :meta="code">
        <template #desc>
          <p>以下显示了所有图标，点击图标即可快速复制代码</p>
          <demo />
        </template>
      </m-doc-demo-block>

      <m-doc-demo-block title="图标预览">
        <template #desc>
          <p>以下显示了所有图标，点击图标即可快速复制代码</p>
          <ul class="icon-panel">
            <li v-for="item in list" :key="item" @click="handleCopy(item)">
              <m-icon :name="item"></m-icon>
              <span>{{ item }}</span>
            </li>
          </ul>
        </template>
      </m-doc-demo-block>
    </m-doc-component-doc>
  </m-container>
</template>
<script setup lang="ts">
  import { Ref, ref } from 'vue'
  import { useMessage } from '@/composables'
  import props from './apis/_props'
  import copy from 'clipboard-copy'
  import demo from './demos/1.vue'
  import code from './demos/1.vue?raw'

  const message = useMessage()
  const list: Ref<string[]> = ref([])
  var symbols = document.querySelectorAll('body>svg>symbol')
  symbols.forEach((m) => {
    list.value.push(m.id.replace('m-', ''))
  })

  const handleCopy = (code) => {
    const html = `<m-icon name="${code}"></m-icon>`

    copy(html)

    message.success(`代码已复制到粘贴板：${html}`)
  }
</script>
<style lang="scss" scoped>
  .icon-panel {
    li {
      position: relative;
      float: left;
      width: 16.66%;
      text-align: center;
      height: 120px;
      line-height: 120px;
      color: #666;
      font-size: 13px;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
      margin-right: -1px;
      margin-bottom: -1px;
      cursor: pointer;

      .m-icon {
        font-size: 32px;
        margin-bottom: 15px;
        transition: color 0.15s linear;
      }

      span {
        position: absolute;
        left: 50%;
        bottom: -40px;
        transform: translateX(-50%);
        font-size: 14px;
      }

      &:hover {
        color: #5cb6ff;
      }
    }
  }
</style>
